﻿(function(window, undefine) {
    var map = null;
    var drawingManager = null;
   var image = '../../Content/Map/Images/YellowPin1LargeB.png';
    function initialize() {

        var mapOptions = {
            center: new google.maps.LatLng(15.120011, 108.808937),
            zoom: 6
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
       

        //Set style for each feature
        map.data.setStyle(function(feature) {
            var featureName = feature.getProperty("Name");
            var iconImg = '';
            switch (featureName) {
            case 'a':
                iconImg = '../../Content/Map/Images/LetterA.png';
                break;
            case 'b':
                iconImg = '../../Content/Map/Images/LetterB.png';
                break;
            case 'c':
                iconImg = '../../Content/Map/Images/LetterC.png';
                break;
            case 'd':
                iconImg = '../../Content/Map/Images/LetterD.png';
                break;
            case 'e':
                iconImg = '../../Content/Map/Images/LetterE.png';
                break;
            default:
                iconImg = image;
            }
            return {
                icon: iconImg
            };
        });
        
        //Handle on click each feature on data layer 
        var infoWindown = new google.maps.InfoWindow();
        google.maps.event.addListener(map.data,"click", function(evt) {
            infoWindown.setContent("<div style=\"height:60px; width:100px\">Name : " + evt.feature.getProperty("Name") + "<br>" +
                "Lat : " + evt.feature.getProperty("Lat") + "<br>" +
                "Lon : " + evt.feature.getProperty("Lon") + "</div>");
            infoWindown.setPosition(evt.feature.getGeometry().get());
            infoWindown.open(map);
        });
        

        //create drawing manager
        drawingManager = new google.maps.drawing.DrawingManager({
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.MARKER,
                    google.maps.drawing.OverlayType.CIRCLE,
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.POLYLINE,
                    google.maps.drawing.OverlayType.RECTANGLE
                ]
            },
            //marker options
            markerOptions: {
                icon: image
            },
            //circle opetion
            circleOptions: {
               fillColor: '#66FF99',
                //fillOpacity: 1,
                strokeWeight: 2,
                clickable: false,
                editable: true,
                zIndex: 1
            },
            //polygon option
            polygonOptions:
            {
               fillColor: '#66FF99',
                //fillOpacity: 1,
                strokeWeight: 2,
                clickable: false,
                editable: true,
                zIndex: 1,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
            },
            //rectangle option
            rectangleOptions:
            {
              fillColor: '#66FF99',
                //fillOpacity: 1,
                strokeWeight: 2,
                clickable: false,
                editable: true,
                zIndex: 1
            },
            polylineOptions:
            {
                strokeWeight:2
            }
        });
        //Set the drawing manager for map
        drawingManager.setMap(map);
    }

    //Initialize map
    google.maps.event.addDomListener(window, 'load', initialize);

    $(document).ready(function() {
        //Clear graphic
        $('#clearGraphic').click(function() {
            drawingManager.clearOverlays();
        });
        //Get data

        /*var dbLoations = document.getElementById("dbLocations").value;
        var listPoint2 = [];
        for(var i = 0; i< dbLoations.length; i++)
        {
            
        }*/

        var listPoint = [
            new google.maps.LatLng(15.116951, 108.802757),        
            new google.maps.LatLng(15.134848, 108.828506),
            new google.maps.LatLng(15.120558, 108.778038)
        ];
            var markers = [];
            var iterator = 0;

            function getData() {
                for (var i = 0; i < listPoint.length; i++) {
                    setTimeout(function() {
                        addMarker();
                    }, i * 200);
                }
            }

            function addMarker() {
                markers.push(new google.maps.Marker({
                    position: listPoint[iterator],
                    map: map,
                    draggable: false,
                    icon: image,
                    animation: google.maps.Animation.DROP
                }));
                iterator++;
            }

        $("#getData").click(function() {
            //getData();
              //add feature into data layer
            for (var x in fset) {
                map.data.add(fset[x]);
            }   
        });
    });

})(window);